<template>
  <view>
    <m-top :autoBack="true" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight"> 实名认证 </m-top>

    <m-container :top="glTop">
      <view class="pdv40">
        <view class="post-box">
          <view class="c333 font24"> 请填写您新的身份信息确保无误，并需要通过手机验证码核对安全及本人操作 </view>
          <view class="post-box">
            <m-card>
              <view class="post-form">
                <view class="form-item">
                  <view class="label font28 c333">姓名</view>
                  <view class="mgt20">
                    <u-input
                      color="#333333"
                      fontSize="28rpx"
                      border="none"
                      placeholder="请输入您的姓名"
                      v-model="state.tmb_name"
                      :customStyle="{
                        'background-color': '#F6F5FA',
                        height: '76rpx',
                        'border-radius': '12rpx',
                        padding: '0 20rpx',
                      }"
                      placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                    ></u-input>
                  </view>
                </view>

                <view class="form-item">
                  <view class="label font28 c333">身份证号</view>
                  <view class="mgt20">
                    <u-input
                      color="#333333"
                      fontSize="28rpx"
                      border="none"
                      v-model="state.tmb_id_card"
                      placeholder="请输入您的身份证号"
                      :customStyle="{
                        'background-color': '#F6F5FA',
                        height: '76rpx',
                        'border-radius': '12rpx',
                        padding: '0 20rpx',
                      }"
                      placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                    ></u-input>
                  </view>
                </view>
              </view>
            </m-card>

            <!-- <view class="mgt40">
              <m-card>
                <view class="post-form">
                  <view class="form-item">
                    <view class="flex align-center">
                      <u-input
                        color="#333333"
                        fontSize="28rpx"
                        border="none"
                        placeholder="请输入手机号"
                        :customStyle="{
                          'background-color': 'transparent',
                          height: '76rpx',
                          'border-radius': '12rpx',
                          padding: '0 20rpx',
                        }"
                        type="number"
                        placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                      ></u-input>

                      <view class="code-box c481 font28">获取验证码</view>
                    </view>
                  </view>

                  <view class="form-item">
                    <view class="label font28 c333">验证码</view>
                    <view class="mgt20">
                      <u-input
                        color="#333333"
                        fontSize="28rpx"
                        border="none"
                        placeholder="请输入您的手机号"
                        :customStyle="{
                          'background-color': '#F6F5FA',
                          height: '76rpx',
                          'border-radius': '12rpx',
                          padding: '0 20rpx',
                        }"
                        placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                      ></u-input>
                    </view>
                  </view>
                </view>
              </m-card>
            </view> -->
          </view>

          <view class="post-submit">
            <u-button
              type="primary"
              color="#481EC1"
              text="提交"
              @click="submit"
              :customStyle="{
                height: '84rpx',
                'border-radius': '20rpx',
                'box-shadow': ' 0rpx 2rpx 12rpx 0rpx rgba(27,166,131,0.0988)',
                'font-size': '32rpx',
              }"
            ></u-button>
          </view>
        </view>
      </view>
    </m-container>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import UserInfoMixin from "@/mixins/modules/user.js";
import { updateUserInfoApi } from "@/api/modules/base.js";

export default {
  mixins: [GlTopMixin, UserInfoMixin],
  components: {},
  data() {
    return {
      state: {
        tmb_name: "",
        tmb_sex: "",
        tmb_icon: "",
        tmb_company_name: "",
        tmb_position: "",
        tmb_id_card: "",
      },
    };
  },
  watch: {
    "userInfo.tmb_id": {
      immediate: true,
      handler(value) {
        if (!value) return;
        Object.assign(this.state, this.userInfo);
      },
    },
  },

  methods: {
    async submit() {
      // 
      const pages  = this.$u.pages()
      uni.showLoading({
        title: "加载中",
        mask: true
      });
      await updateUserInfoApi(this.state).finally(uni.hideLoading);
      this.$u.toast("更新成功"); 
      // 更新下store库
      this.$store.dispatch("getMemberInfo");
      if(pages.length >= 2) {
        const page = pages[pages.length - 2]
        page.$vm.state.tmb_name = this.state.tmb_name
        page.$vm.state.tmb_id_card = this.state.tmb_id_card
      }
      await this.$u.sleep(2000);
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.post-box {
  margin-top: 80rpx;
}

.post-form {
  padding: 20rpx;

  .form-item {
    &:not(:first-child) {
      margin-top: 40rpx;
    }
  }
}

.post-submit {
  margin-top: 120rpx;
}

.code-box {
  padding: 8rpx 30rpx;
  border-radius: 40rpx;
  background-color: rgba(#481ec1, 0.1);
  margin-left: 10rpx;
}
</style>
